<template>
	<view class="container" style="padding-bottom: 50rpx;">
		<u--form ref="queryForm" :model="query" label-width="140rpx">
		  <u-form-item label="车间" prop="plant">
				<uni-data-select
					v-model="query.plant"
					:localdata="plantList"
					@change="plantChange"
					style="flex: 1;"
					:clear="false"
					placeholder="请选择车间"
				></uni-data-select>
			</u-form-item>
			<u-form-item label="线体" prop="lineId">
		    <uni-data-select
		    	v-model="query.lineId"
		    	:localdata="lineIdList"
		    	@change="lineIdChange"
		    	style="flex: 1;"
		    	:clear="false"
		    	placeholder="请选择线体"
		    ></uni-data-select>
			</u-form-item>
			<u-form-item label="工位" prop="track">
		    <uni-data-select
		    	v-model="query.track"
		    	:localdata="trackList"
		    	@change="trackChange"
		    	style="flex: 1;"
		    	:clear="false"
		    	placeholder="请选择工位"
		    ></uni-data-select>
			</u-form-item>
		</u--form>
		<view style="display: flex;flex-direction: column;gap: 10rpx;">
			<uni-card v-for="(item, index) in missionList" :key="index">
				<u-read-more :showHeight="item.height" textIndent="0rem" :shadowStyle="shadowStyle" closeText="展开" openText="收起" toggle>
					<view class="item-top">
						<view class="left">
							<view class="text-item">
								<text class="label">载具号：</text>
								<text class="content">{{ item.containerCode }}</text>
							</view>
							<view class="text-item">
								<text class="label">工单：</text>
								<text class="content">{{ item.workOrderNo }}</text>
							</view>
							<view class="text-item">
								<text class="label">物料：</text>
								<text class="content">{{ item.materialName || '暂无物料信息' }}</text>
							</view>
						</view>
						<view class="right">
							<view class="text-item">
								<text class="label">线体：</text>
								<text class="content">{{ item.productLineCode }}</text>
							</view>
							<view>
								<u-button type="warning" size="small" style="width: 150rpx;" :loading="btn.loading" @click="dispenseKit(item)">补料</u-button>
							</view>
						</view>
					</view>
					<view style="display: flex;flex-direction: column;gap: 10rpx;">
						<uni-card v-for="(item2, index2) in item.pdaContainerMaterialDTOList" :key="index2">
							<view class="inner-card">
								<view class="inner-left">
									<view class="text-item">
										<text class="label">物料名：</text>
										<text class="content">{{ item2.materialName }}</text>
									</view>
									<view class="text-item">
										<text class="label">料号：</text>
										<text class="content">{{ item2.materialCode }}</text>
									</view>
								</view>
								<view class="inner-right">
									<view class="text-item">
										<text class="label">数量：</text>
										<text class="content">{{ item2.materialNum }}</text>
									</view>
								</view>
							</view>
						</uni-card>
					</view>
				</u-read-more>
			</uni-card>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import { plantListAPI, getLineListByPlantAPI, getTrrackListByPlantAndLineAPI, getcontainerListAPI, dispenseKitAPI } from '@/api/work/usageAPIList.js'
	import {
		uniCard,
		uniCombox
	} from '@dcloudio/uni-ui'
	import uniDataSelect from '../../../../node_modules/@dcloudio/uni-ui/lib/uni-data-select/uni-data-select.vue'
	export default {
		components: {
			uniCard,
			uniCombox,
			uniDataSelect
		},
		data() {
			return {
				query: {
					plant: '',
					lineId: '',
					track: ''
				},
				shadowStyle: {
					backgroundImage: "none"
				},
				missionList: [''],
				plantList: [],
				lineIdList: [],
				trackList: [],
				btn: {
					loading: false
				}
			};
		},
		mounted() {
			// this.getElementHeight()
			this.getPlantList()
		},
		methods: {
			// 获取数组的时候如果数组长度大于0要执行一次, 否则卡片高度无法获取
			getElementHeight() {
				const query = uni.createSelectorQuery()
				query.selectAll('.left').boundingClientRect(data => {
					if (data) {
						const heights = data.map(item => item.height)
						this.missionList = this.missionList.map((item, index) => {
							return {
								...item,
								height: heights[index] - 2
							}
						})
						// console.log(this.missionList)
					}
				}).exec()
			},
			async getPlantList() {
				const res = await plantListAPI()
				// console.log(res)
				if (res.returnCode === '1') {
					this.plantList = res.returnData.map(item => {
						return {
							text: item,
							value: item
						}
					})
				}
			},
			// 从车间-获取线体
			async plantChange(e) {
				this.missionList = []
				const submitForm = {
					plant: e
				}
				const res = await getLineListByPlantAPI(submitForm)
				if (res.returnCode === '1') {
					// 修复去重逻辑：使用value作为key而不是lineName
					this.lineIdList = [...new Map(res.returnData.map(item => {
						return {
							text: item.lineName,
							value: item.lineId
						}
					}).map(item => [item.value, item])).values()]
					this.query.lineId = ''
					this.query.track = ''
					this.trackList = []
				}
			},
			// 从线体-获取工位
			async lineIdChange(e) {
				this.missionList = []
				const submitForm = {
					plant: this.query.plant,
					lineId: e
				}
				const res = await getTrrackListByPlantAndLineAPI(submitForm)
				if (res.returnCode === '1') {
					// 修复去重逻辑：使用value作为key而不是trackName
					this.trackList = [...new Map(res.returnData.map(item => {
						return {
							text: item.trackName,
							value: item.track
						}
					}).map(item => [item.value, item])).values()]
					this.query.track = ''
				}
			},
			// 获取物料?单据?列表
			async trackChange(e) {
				const submitForm = {
					plant: this.query.plant,
					lineId: this.query.lineId,
					track: e
				}
				const res = await getcontainerListAPI(submitForm)
				// console.log(res)
				if (res.returnCode === '1') {
					this.missionList = res.returnData || []
					// console.log(res)
					this.$nextTick(() => {
						this.getElementHeight()
					})
				} else {
					return this.$refs.uToast.show({
						type: 'warning',
						message: res.returnReason
					})
				}
			},
			// 补料
			async dispenseKit(item) {
				try{
					this.btn.loading = true
					const submitForm = {
						plant: this.query.plant,
						lineId: this.query.lineId,
						track: this.query.track,
						containerCode: item.containerCode
					}
					// console.log(submitForm)
					const res = await dispenseKitAPI(submitForm)
					if (res.returnCode === '1') {
						setTimeout(() => {
							this.trackChange(this.query.track)
						}, 1000)
						this.$refs.uToast.show({
							type: 'success',
							message: res.returnReason || '补料成功'
						})
					} else {
						return this.$refs.uToast.show({
							type: 'warning',
							message: res.returnReason || '补料失败'
						})
					}
				} finally {
					this.btn.loading = false
				}
			}
		}
	}
</script>

<style lang="scss">
::v-deep .uni-card {
	margin: 0 !important;
	padding: 0 !important;
}
.item-top {
	width: 100%;
	// height: 300rpx;
	display: flex;
	justify-content: space-between;
	.left, .right {
	  flex: 1;
	  display: flex;
	  flex-direction: column;
	  align-items: flex-start;
	}
	.text-item {
		display: flex;
		word-wrap: break-word;
		overflow-wrap: break-word;
		.label {
			white-space: nowrap;
		}
		.content {
			flex: 1;
			word-wrap: break-word;
			overflow-wrap: anywhere;
		}
	}
}
.inner-card {
	display: flex;
	.inner-left {
		flex: 1;
	}
	.inner-right {
		flex: 1;
	}
	.text-item {
		display: flex;
		word-wrap: break-word;
		overflow-wrap: break-word;
		.label {
			white-space: nowrap;
		}
		.content {
			flex: 1;
			word-wrap: break-word;
			overflow-wrap: anywhere;
		}
	}
}
</style>